  <template>
<!-- 跟组件 -->
  <div>
        <van-row id="center-top" @click='goSelf'>
                    <van-col span="24">
                        <van-image class="center-top-image" width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                        <p class="center-top-p">立即登录</p>
                    </van-col>
        
        </van-row>
         <van-row id="center-body"  @click='goSelf'> 
               <van-col span="12" >
                   <van-icon name="coupon-o" class="van-icon-mail" color="#ffcc33"/>
                   <div class='order'>电影订单</div>
                </van-col>
               <van-col span="12" >
                   <van-icon name="orders-o" class="van-icon-buy" color='#00cc99'/>
                    <div class='order'>商品订单</div>
               </van-col>
         </van-row>



<!-- 以下是4个导航栏 -->
<van-nav-bar left-text="返回" left-arrow  @click='goSelf'>
   <template #left>
    <van-icon name="credit-pay" color="#FF8C69"/>
     <p  class='detail'>商品订单</p>
  </template>
  <template #right>
    <van-icon name="arrow" class='narrow' color="#CDC9C9"/>
  </template>
</van-nav-bar>

<van-nav-bar left-text="返回" left-arrow  @click='goSelf'>
   <template #left>
    <van-icon name="cash-on-deliver" color='#CDC0B0' />
     <p class='detail'>组合红包</p>
  </template>
  <template #right>
    <van-icon name="arrow" class='narrow' color="#CDC9C9" />
  </template>
</van-nav-bar>

<van-nav-bar left-text="返回" left-arrow  @click='goSelf'>
   <template #left>
    <van-icon name="cash-back-record" color=' #EEDC82' />
     <p  class='detail'>余额</p>
  </template>
  <template #right>
      <p  class='detail'>￥0</p>
    <van-icon name="arrow" class='narrow' color="#CDC9C9" />
  </template>
</van-nav-bar>


<van-nav-bar left-text="返回" left-arrow  @click='goSelf'>
   <template #left>
    <van-icon name="setting-o"  color="#90EE90"/>
     <p  class='detail'>设置</p>
  </template>
  <template #right>
    <van-icon name="arrow" class='narrow' color="#CDC9C9" />
  </template>
</van-nav-bar>
  </div>
</template>

<script>
export default {
    methods:{
        goSelf(){
            this.$router.push({
                path:'/self'
            })
        }
    }
};
</script>
<style>

#center-top{
  height:200px;
  background:#EEAD0E;
  text-align:center;
  
}
 
.center-top-image{
    position:relative;
}
.center-top-image{
    display:block;
    position:absolute;
    left:20px;
    top:50px
}

.center-top-image img{
    border-radius:60%;
    width:80px;
    height:80px;
}
.center-top-p {
margin-top:75px
}

.van-col--12{
    margin: 12px 0;
    text-align:center;

}

.order{
    font-size:14px;
}
.van-icon{
        font-size:20px
}

.detail{
    margin:0 12px;
    font-size:16px
}
.narrow{
      font-size:14px
}
 
</style>
